<template>
  <div class="article-meta">
    <nuxt-link :to="{name:'profile',params:{username:article.author.username}}" ><img :src="article.author.image" /></nuxt-link>
    <div class="info">
      <nuxt-link :to="{name:'profile',params:{username:article.author.username}}" class="author">{{article.author.username}}</nuxt-link>
      <span class="date">{{article.createdAt|date('MMM DD,YYYY')}}</span>
    </div>
    <span v-if="user && user.username===article.author.username">
      <nuxt-link class="btn btn-sm btn-outline-secondary" :to="{name:'editor',params:{slug:article.slug}}">
        <i class="ion-edit"></i>
        &nbsp; Edit Article
      </nuxt-link>
      &nbsp;&nbsp;
      <button class="btn btn-outline-danger btn-sm" @click="delArticle()">
        <i class="ion-trash-a"></i> Delete Article
      </button>
    </span>
    <span v-else>
      <button class="btn btn-sm btn-outline-secondary" :class="{active:article.author.following}" @click="follow" :disabled="article.followDisabled">
        <i class="ion-plus-round"></i>
        &nbsp; {{article.author.following ? 'Unfollow' : 'Follow'}} {{article.author.username}} <span class="counter" v-if="article.following">({{article.following}})</span>
      </button>
      &nbsp;&nbsp;
      <button class="btn btn-sm btn-outline-primary" :class="{active:article.favorited}" @click="favorite" :disabled="article.favoriteDisabled">
        <i class="ion-heart"></i>
        &nbsp; {{article.favorited? 'Unfavorite' : 'Favorite'}} Article <span class="counter" v-if='article.favoritesCount'>({{article.favoritesCount}})</span>
      </button>
    </span>
  </div>
</template>
<script>
import {deleteArticle,addFavorite,deleteFavorite,addFollow,deleteFollow} from '@/api/article'
export default ({
  name:'ArticleMeta',
  props:{
    user:{
      type:Object
    },
    article:{
      type:Object,
      required:true
    }
  },
  // data(){
  //   console.log(this.user)
  // },
  methods:{
    async delArticle(){
      // console.log(this.article.slug)
      const res = await deleteArticle(this.article.slug)
      // console.log(res);
      this.$router.push('/')
    },
    async follow(){
      this.article.followDisabled = true
      const {data} = this.article.author.following ? await deleteFollow(this.article.author.username) : await addFollow(this.article.author.username)
      // console.log(data)
      this.article.author.following = data.profile.following
      this.article.followDisabled = false
    },
    async favorite(){
      this.article.favoriteDisabled = true
      if(this.article.favorited){
        await deleteFavorite(this.article.slug)
        this.article.favorited = !this.article.favorited
        this.article.favoritesCount += -1
      }else{
        await addFavorite(this.article.slug)
        this.article.favorited = !this.article.favorited
        this.article.favoritesCount += 1
      }
      // const {data} = this.article.favorited ? await deleteFavorite(this.article.slug) : await addFavorite(this.article.slug)
      // console.log(data)
      this.article.favoriteDisabled = false
      // this.article.favorited = data.article.favorited
    }
  }
});
</script>
<style>
</style>
